<template>
    <div class="app-container"> 
       <el-row :gutter="10" class="mb8">
          <el-col :span="1.5"  v-hasPermi="['basicData:bankInfo:add']">
             <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
             >Add</el-button>
          </el-col> 
         
          <el-col :span="1.5">
             <el-button
                type="warning"
                plain
                icon="Close"
                @click="handleClose"
             >Close</el-button>
          </el-col> 
       </el-row>
 
       <el-table :border="true" v-loading="loading" :data="dataList" show-overflow-tooltip> 
          <el-table-column label="BENEFICIARY'S NAME" align="center" prop="beneficiaryName" width="160px"  />  
          <el-table-column label="BENEFICIARY'S ADDRESS" align="center" prop="beneficiaryAddress" width="180px"  />  
          <el-table-column label="ACCOUNT NO" align="center" prop="accountNo"  width="200px" />       
          <el-table-column label="BANK NAME" align="center" prop="bankName" width="200px"/>          
          <el-table-column label="BANK ADDRESS" align="center" prop="bankAddress" width="160px" />
          <el-table-column label="COUNTRY" align="center" prop="country" width="200px"/>
          <el-table-column label="PROVINCE" align="center" prop="province" width="200px"/>
          <el-table-column label="SWIFE CODE" align="center" prop="swiftCode" width="160px"/>
          <!-- <el-table-column label="Is Default" align="center" prop="status">
             <template #default="scope">
                <span>{{ statuss[scope.row.status] }}</span>
             </template>
          </el-table-column>   -->
 
          <el-table-column label="Operation" align="center" width="230" class-name="small-padding fixed-width" v-hasPermi="['bankInfo:edit']">
             <template #default="scope">
                <el-button link type="primary"   @click="handleUpdate(scope.row)"  >Update </el-button>
                <el-button link type="primary"  @click="handleDelete(scope.row)" >Delete</el-button>
                <el-button link type="primary"  @click="handleExport(scope.row.bankId)" >Export</el-button> 
             </template>
          </el-table-column>
       </el-table>
 <!-- 
       <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        
       /> -->
 
       <!-- 添加或修改参数配置对话框 -->
       <el-dialog :title="title" v-model="open" width="700px" append-to-body  draggable>
          <el-form ref="dataRef" :model="form" :rules="rules" label-width="180px">
             <el-form-item label="BENEFICIARY'S NAME" required>
                <el-input v-model="form.beneficiaryName" />
             </el-form-item>
             <el-form-item label="BENEFICIARY'S ADDRESS" prop="beneficiaryAddress" required>
                <el-input v-model="form.beneficiaryAddress" placeholder="address" />
             </el-form-item>
             <el-form-item label="Account No" prop="accountNo" required>
                <el-input v-model="form.accountNo" placeholder="accountNo" />
             </el-form-item>
             <el-form-item label="Bank Name" prop="bankName"  required>
                <el-input v-model="form.bankName" placeholder="Bank Name" />
             </el-form-item>       
             <el-form-item label="Bank Address" prop="bankAddress" required>
                <el-input v-model="form.bankAddress" placeholder="Bank Address" />
             </el-form-item>      
             <el-form-item label="Country" prop="country" required>
               <el-select  v-model="form.country"  filterable  placeholder="choose COUNTRY"  clearable style="width: 100%;" >
                  <el-option
                     :key="item.countryName"
                     :label="item.countryName"
                     :value="item.countryName"
                     v-for="item in countrys">
                  </el-option>
               </el-select>    
            </el-form-item>    
            <el-form-item label="Province" prop="province"  required>
               <el-input v-model="form.province" placeholder="Province" />
            </el-form-item>     
             <el-form-item label="Swift Code" prop="swiftCode" required>
               <el-input v-model="form.swiftCode" placeholder="Swift Code" />
            </el-form-item>    
             <!-- <el-form-item label="Default Bank" prop="status" label-width="120px">
                <el-radio-group v-model="form.status">
                   <el-radio
                      v-for="(item,index) in statuss"
                      :key="index"
                      :value = "index"
                      :label= "item"
                   >{{ item }}</el-radio>
                </el-radio-group>
             </el-form-item> -->
          </el-form>   
            
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">Confirn</el-button>
                <el-button @click="cancel">Cancel</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup name="bankInfo">  
 import service from '@/utils/request'  
 import router from '@/router'
 import { downloadFile } from "@/utils/downloadFile";
 import moment from "moment";
 const { proxy } = getCurrentInstance(); 
 const dataList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const countrys = ref([])
 const total = ref(0);
 const title = ref(""); 
 const route = useRoute();
 
 const data = reactive({
   form: {},
   queryParams: { 
     parentId: route.query.id, 
     type: route.query.type
   },
   rules: {
     beneficiaryName:[{ required: true, message: "Beneficiary Name is required", trigger: "blur" }], 
     beneficiaryAddress:[{ required: true, message: "Beneficiary Address is required", trigger: "blur" }], 
     bankName: [{ required: true, message: "Bank Name is required", trigger: "blur" }], 
     bankAddress: [{ required: true, message: "Bank Address is required", trigger: "blur" }],
     accountNo: [{ required: true, message: "accountNo is required", trigger: "blur" }],
     accountNo: [{ required: true, message: "accountNo is required", trigger: "blur" }],
     
   }
 });
 
 const { queryParams, form, rules } = toRefs(data); 
 
 /** 查询数据列表 */
 function getList() {
   loading.value = true; 
   service.get('shipping/bankInfo/list', {params: queryParams.value}).then(response => {
     dataList.value = response.data;
     //total.value = response.total;
     loading.value = false;
   });
 }
 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }
 /** 表单重置 */
 function reset() {
    form.value = {
    id: undefined, 
    parentId: route.query.id,
    beneficiaryName: undefined,
    beneficiaryAddress: undefined,
    bankName: null,
    bankAddress: null, 
    country: null,
    province: null,
    status: 0,
    type: route.query.type
  };
   proxy.resetForm("dataRef");
 }
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
 /** 返回按钮操作 */
 function handleClose() {
   router.back()
   //const obj = { path: "/basicData/carrier" };
   //proxy.$tab.closeOpenPage(obj);
 }
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef"); 
   handleQuery();
 }
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   open.value = true;
   title.value = "Add bankInfo"; 
 }
  
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset(); 
   form.value = row; 
   open.value = true;
   title.value = "Update Bank Info";  
 }
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["dataRef"].validate(valid => {
     if (valid) { 
       if (form.value.bankId != undefined) {
          service.put('/shipping/bankInfo',form.value).then(response => { 
           proxy.$modal.msgSuccess("Update Success");
           open.value = false;
           getList();
         });
       } else {
         service.post('/shipping/bankInfo',form.value).then(response => {
           proxy.$modal.msgSuccess("Add Success");
           open.value = false;
           getList();
         });
       }
     }
   });
 }
 /** 删除按钮操作 */
 function handleDelete(row) { 
   proxy.$modal.confirm('Confirm to delete the data？').then(function() {
     return service.delete(`/shipping/bankInfo/`+row.bankId );
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("Delete Successful"); 
   }).catch(() => {});
 }

 const handleExport=(id)=>{
   let title = "bank_detail_";
   if(route.query.type == 0){
      title = "client_" + title
   }else if(route.query.type == 1){
      title = "carrier_" + title
   }else if(route.query.type == 2){
      title = "supplier_" + title
   }
   title =title+ moment( new Date()).format('YYYYMMDD')+".xlsx"
   downloadFile(`/shipping/bankInfo/export/` + id,null, title);
 }
 
 getList();
 service.get("/shipping/country/list").then(result =>{
    countrys.value = result.data;
}) 
 </script>
 